import React from 'react'
import { connect } from 'react-redux'
import { Link, Redirect } from 'react-router-dom'
import TodoList from 'components/TodoList'
import { userLogout } from 'reducers/author'

import styles from './style.less'
import 'iconfont/iconfont.css'


// 把 state 绑定到 props 中
/*const mapStateToProps = (state) => {
	return {
		userinfo: state.userInfo,
		userUpdate: state.userUpdate
	}
}
const actionCreators = {login, city, addLoginAsync}

App = connect(mapStateToProps, actionCreators)(App)*/

// 用装饰器简写方式，等同于上面注释代码
@connect(
	// 你要state什么属性放到props里
	state => ({
		Auth: state.auth
	}),
	// 你要什么方法，放到props里，自动dispatch
	{ userLogout }
)
export default class App extends React.Component {

	constructor(props) {
		super(props)
	}

	render() {
		const redirectToLogin = <Redirect to="/login"></Redirect>
		const App = (
			<div className={styles.bg}>
				<h2 className={styles.title}>这是测试Webpack 4打包的项目</h2>
				<p className={styles.msg}>针对移动端页面动态布局</p>

				<div className={styles.iconImg}>
					<h3 className={styles.title}>测试小图片，打包转base64格式</h3>
					<div>
						<i className={styles.icon1}></i>
						<i className={styles.icon2}></i>
						<i className={styles.icon3}></i>
						<i className={styles.icon4}></i>
					</div>
				</div>

				<TodoList />

				<div className={styles.router}>
					<Link to="/details">点击调转到详情页</Link>
				</div>

				{this.props.Auth.isAuth ? <button className={styles.logout} onClick={this.props.userLogout}>注销登录</button> : null}
			</div>
		)
		return this.props.Auth.isAuth ? App : redirectToLogin
	}
}